<template>
  <div class="tabbar">
    <ul class="tabbar-item">
      <li class="tabbar-item-list">
        <router-link to="/home">
          <img class="tabbar-icon tabbar-default" src="@/assets/images/tabbar/home.png">
          <img class="tabbar-icon tabbar-active" src="@/assets/images/tabbar/home_active.png">
          <div class="tabbar-text">
            首页
          </div>
        </router-link>
      </li>
      <li class="tabbar-item-list">
        <router-link to="/category">
          <img class="tabbar-icon tabbar-default" src="@/assets/images/tabbar/category.png">
          <img class="tabbar-icon tabbar-active" src="@/assets/images/tabbar/category_active.png">
          <div class="tabbar-text">
            分类
          </div>
        </router-link>
      </li>
      <li class="tabbar-item-list">
        <router-link to="/cart">
        <img class="tabbar-icon tabbar-default" src="@/assets/images/tabbar/cart.png">
          <img class="tabbar-icon tabbar-active" src="@/assets/images/tabbar/cart_active.png">
          <div class="tabbar-text">
            购物车
          </div>
        </router-link>
      </li>
      <li class="tabbar-item-list"> 
        <router-link to="/profile">
          <img class="tabbar-icon tabbar-default" src="@/assets/images/tabbar/profile.png">
          <img class="tabbar-icon tabbar-active" src="@/assets/images/tabbar/profile_active.png">
          <div class="tabbar-text">
            我的
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'Tabbar'  
}
</script>
<style>
.tabbar{position: fixed;bottom: 0;left: 0;width: 100%;height: 45px;background-color: #fdfdfd;box-shadow:0 -1px 3px rgba(0,0,0,0.1)}
.tabbar-item{display: flex;flex-direction: row;justify-items: center;}
.tabbar-item-list{flex:1;text-align: center;}
.tabbar-icon{width: 23px;height: auto;margin-top: 2px;}
.tabbar-text{margin-top: -3px;}
.tabbar-active{display: none;}
.router-link-exact-active.router-link-active .tabbar-default{display: none}
.router-link-exact-active.router-link-active .tabbar-active{display: inline}
.router-link-exact-active.router-link-active .tabbar-text{color: red}
</style>
